<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html lang="es" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Two-Marks MANAGE PHONE</title>
		<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery/jquery190.js"></script>
		
		<script type="text/javascript" src="<?php echo base_url();?>assets/js/jqueryui/jquery-ui-1.10.2.custom.js"></script>
		
		<script type="text/javascript" src="<?php echo base_url();?>assets/js/datatable/jquery.dataTables.min.js"></script>
		
		
		<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/css/datatable/jquery.dataTables.css">
		
		<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700|Cookie' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/css/base/base.css">	
		
		<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/css/jqueryui/ui-lightness/jquery-ui-1.10.2.custom.css">
		
	
		<script type="text/javascript" charset="utf-8">
		/************
		start init 
		*************/
		$(document).ready(function() 
		{
			$('#table_phone').dataTable
			({
				"bJQueryUI": true,
			} );
		

			$( "#modify" ).dialog
			({
				autoOpen: false,
				show: 
				{
					effect: "blind",
					duration: 600
				},
				hide: 
				{
					effect: "explode",
					duration: 700
				},
				height:'260',
				width:'400',
				modal: true,
			});
			
			$( "#create" ).dialog
			({
				autoOpen: false,
				show: 
				{
					effect: "blind",
					duration: 600
				},
				hide: 
				{
					effect: "explode",
					duration: 700
				},
				height:'180',
				width:'700',
				modal: true,
			});

			$( "#delete" ).dialog
			({
				autoOpen: false,
				show: 
				{
					effect: "blind",
					duration: 600
				},
				hide: 
				{
					effect: "explode",
					duration: 700
				},
				height:'200',
				width:'550',
				modal: true,
			});
			

			$( "#createButton" ).click(function(o) 
			{
				createrow(this);
 
			});

			$( ".delete" ).click(function(o) 
			{
				deleterow(this);
			});
			
			$( ".updateable" ).click(function(o) 
			{
				updatefield(this);
			});
			
		} );
		/************
		end init 
		*************/	
		/***********
		start delete 
		************/
		function deleterow(o)
		{
			var phone;
			var name;
			if(typeof o != 'object')
			{
				 phone=($("#"+o).closest('tr').find('td:first')).text();
				 name=($("#"+o).closest('tr').find('td:first')).next().next().text();
				
			}
			else
			{ 
				phone=($(o).closest('tr').find('td:first')).text();
			 	name=($(o).closest('tr').find('td:first')).next().next().text();
			}
			
			$( "#delete" ).dialog( "option", "title","Eliminando telefono de "+name+" del sistema");

			
			$( "#delete" ).html("Esta seguro que Desea eliminar el telefono de  "+name+ " ( id = "+phone+") del sistema ? [se eliminaran los datos asociados a este telefono]");

			
			$( "#delete" ).dialog({ buttons: [
			                                     {
			                                         text: "Eliminar",
			                                         click: function() 
			                                         { 
		
			                                        	 var request = $.ajax({
			                                        		 url: "managephone/delete",
			                                        		 type: "POST",
			                                        		 data: {idphone: phone},
			                                        		 dataType: "html"
			                                        		 });
			                                        		 request.done(function(msg) 
					                                        {
							                                     if(msg=="Datos incorrectos")
								                                     return;
			                                        			 $( "#delete" ).dialog({ buttons: [
				                                        			                                  {
																										text: "Ok", click: function() 
																                                         {
																											$("#delete").html( "" );
																											$("#delete").dialog( 'close' );
																	                                     }
					                                        			                              }
					              					                                        			]});


			                                        			 if(typeof o != 'object')
		                                        				{
			                                        				 var row = $("#"+o).closest("tr").get(0);
			                                        				 $('#table_phone').dataTable().fnDeleteRow($('#table_phone').dataTable().fnGetPosition(row));
		                                        				}
		                                        				else
		                                        				{ 
		                                        					var row = $(o).closest("tr").get(0);
		                                        					$('#table_phone').dataTable().fnDeleteRow($('#table_phone').dataTable().fnGetPosition(row));
																}
			                                        			 
				                                        		 $("#delete").html( msg );
				                                        								   	
			                                        		 });
			                                        		 request.fail(function(jqXHR, textStatus) {
			                                        		 alert( "Request failed: " + textStatus );
			                                        		 });
				                                         
				                                     }
			                                     }
			                                 ] });

			$( "#delete" ).dialog( "open" );
		}
		/************
		end delete 
		*************/
		/************
		start update 
		*************/
		function updatefield(o)
		{
			var thname ;
			var phone;
		
			if(typeof o != 'object')
			{
				
				thname = ($("#"+o).closest('table').find('th').eq($("#"+o).index())).text();
				phone=($("#"+o).closest('tr').find('td:first')).text();							
				$( "#modify" ).html("Se modificara el siguiente valor :<br> "+$("#"+o).text());
				
			}
			else
			{
				thname = ($(o).closest('table').find('th').eq($(o).index())).text();
				phone=($(o).closest('tr').find('td:first')).text();				
				$( "#modify" ).html("Se modificara el siguiente valor :<br> "+$(o).text());
				$(o).attr('id', 'updating');
			}
			
			
			$( "#modify" ).dialog( "option", "title","Modificando "+thname);
			
			
			
			$( "#modify" ).html($( "#modify" ).html()+"<br><br>ingrese el nuevo valor : ");
			$( "#modify" ).html($( "#modify" ).html()+"<input type='input' id='inputUpdate'/>");
			
			$( "#modify" ).dialog({ buttons: [
			                                     {
			                                         text: "Modificar",
			                                         click: function() 
			                                         { 
				                                         var val= $("#inputUpdate").val();
				                                         if(val=="")
				                                         {
					                                         alert("se debe ingresar un nuevo valor");
					                                         return;
				                                         }

				                                         else
				                                         {
				                                        	 var request = $.ajax({
				                                        		 url: "managephone/update",
				                                        		 type: "POST",
				                                        		 data: {idphone : phone, field : thname,value:val},
				                                        		 dataType: "html"
				                                        		 });
				                                        		 request.done(function(msg) 
						                                        {
				                                        			 $( "#modify" ).dialog({ buttons: [
					                                        			                                  {
																											text: "Ok", click: function() 
																	                                         {
																												$("#modify").html( "" );
																												$("#modify").dialog( 'close' );
																		                                     }
						                                        			                              }
						                                        			                     ]});

				                                        			if(typeof o != 'object')
				                                        			{
					                                        			//alert($("#"+o).html());
				                                        				$("#"+o).html(val);
																						
					                                        		}
				                                        			else
					                                        		{
				                                        				$("#updating").html(val);
				                                        				$("#updating").removeAttr('id');
					                                        		}
					                                        		 $("#modify").html( msg );
					                                        								   	
				                                        		 });
				                                        		 request.fail(function(jqXHR, textStatus) {
				                                        		 alert( "Request failed: " + textStatus );
				                                        		 });
						                                 }
				                                         
				                                     }
			                                     }
			                                 ] });

			$( "#modify" ).dialog( "open" );
		}
		/************
		end update 
		************/
		/************
		start create 
		*************/
		function createrow(o)
		{
			$("#create").html('<table id="table_create" class="tablesorter"> '
					+'<thead>' 
						+'<tr>' 
						  +'  <th>Id del telefono</th>'
						+'    <th>Numero del telefono</th> '
						+'    <th>Propietario del telefono</th> '
					+'	</tr> '
					+'</thead> '
					+'<tbody>'
					+'	<td><input type="input" value="" id="newPhoneId"/></td>'
					+'	<td><input type="input" value="" id="newPhoneNumber"/></td>'
					+'	<td><input type="input" value="" id="newPhoneOwner"/></td>'
					+'</tbody> '
				+'</table>');
			$("#create").dialog('option','title','Crear usuario');
			
			$( "#create" ).dialog({ buttons: [
											{

												text: "Crear",
												click: function() 
												{
													if($("#newPhoneId").val()=="" || $("#newPhoneNumber").val()==""|| $("#newPhoneOwner").val()=="")
													{
														alert("Debe completar todos los campos");
														return;
													}
													else
													{
														var request = $.ajax({
										            		 url: "managephone/create",
										            		 type: "POST",
										            		 data: {idphone : $("#newPhoneId").val(),phone_number:$("#newPhoneNumber").val(),owner:$("#newPhoneOwner").val()},
										            		 dataType: "html"
										            		 });
										            		 request.done(function(msg) 
										                    {
												                 if(msg=="Datos incorrectos")
													                 	return;
												                 	
										            			 $( "#create" ).dialog({ buttons: [
										                			                                  {
																										text: "Ok", click: function() 
																                                         {
																											$("#newPhoneId").val("");
																											$("#newPhoneNumber").val("");
																											$("#newPhoneOwner").val("");
																											$("#create").dialog( 'close' );
																	                                     }
										                    			                              }
														                                        			]});
				                                        			
										            			 var a = $('#table_phone').dataTable().fnAddData
										            			 									( [
										            			                               		$("#newPhoneId").val(),
										            			                               		$("#newPhoneNumber").val(),
										            			                               		$("#newPhoneOwner").val(),
										            			                               		"delete",
										            			                               		] );
										            			 
										            			 ntr = $('#table_phone').dataTable().fnSettings().aoData[ a[0] ].nTr
										            			 del=($(ntr.cells[0]).closest('tr').find('td:last'));
										            			 
										            			 $(($(ntr.cells[0]).closest('tr').find('td:last'))).attr('onclick',"javascript:deleterow('"+$("#newPhoneId").val()+"delete');");
										            			 $(($(ntr.cells[0]).closest('tr').find('td:last'))).attr('id',$("#newPhoneId").val()+'delete');

										            			 $(($(ntr.cells[0]).closest('tr').find('td:first'))).attr('onclick',"javascript:updatefield('"+$("#newPhoneId").val()+"idphone');");
										            			 $(($(ntr.cells[0]).closest('tr').find('td:first'))).attr('id',$("#newPhoneId").val()+'idphone');

										            			 $(($(ntr.cells[0]).closest('tr').find('td:first')).next()).attr('onclick',"javascript:updatefield('"+$("#newPhoneId").val()+"phone_number');");
										            			 $(($(ntr.cells[0]).closest('tr').find('td:first')).next()).attr('id',$("#newPhoneId").val()+'phone_number');

										            			 $(($(ntr.cells[0]).closest('tr').find('td:first')).next().next()).attr('onclick',"javascript:updatefield('"+$("#newPhoneId").val()+"owner');");
										            			 $(($(ntr.cells[0]).closest('tr').find('td:first')).next().next()).attr('id',$("#newPhoneId").val()+'owner');
										            			 
										                		 $("#create").html( "Un nuevo telefono se ha agregado" );
										                								   	
										            		 });
										            		 request.fail(function(jqXHR, textStatus) {
										            		 alert( "Request failed: " + textStatus );
										            		 });
													}
												} 
												
		                                         
												
											}
				                              ]
            						});
			$( "#create" ).dialog('open');
		}
		/************
		end create 
		*************/
		</script>
	</head>
	<body>
		<div class="wrapper">
			<div id="top">
				<div id="logo">
		            <img id="logoimage" src="<?php echo base_url();?>assets/img/logo.png" alt="logo">	<!-- Logo image -->
		            <h1 id="logotitle">TwoMarks</h1>	<!-- Logo text -->
		        </div>
		    
		        <nav>	
		            <ul>
		            	<li><a href="<?php echo base_url();?>" >HOME</a></li>
		            	<li><a href="<?php echo base_url();?>/pruebas/managephone">Telefonos</a></li>
		                <li><a href="<?php echo base_url();?>/pruebas/manageuser">Usuarios</a></li>
		                <li><a href="<?php echo base_url();?>/pruebas/manageplace">Lugares</a></li>
		            </ul>       
		        </nav>
			</div>
	       
		    <hr/><!-- Horizontal Line -->
		    
			<div id="container">
				<input type="button" value="Agregar nuevo telefono" id="createButton"/>
	    		<table id="table_phone" class="tablesorter"> 
					<thead> 
						<tr> 
							<th>Id del telefono</th>
						    <th>Numero del telefono</th>
						    <th>Propietario del telefono</th> 
						    <th> </th> 
						</tr> 
					</thead> 
					<tbody>
					<?php 
						foreach ($phoneData->result() as $row)
						{
							echo "<tr>";
								echo "<td class='updateable'>".$row->idphone."</td>";
								echo "<td class='updateable'>".$row->phone_number."</td>";	
								echo "<td class='updateable'>".$row->owner."</td>";
								echo "<td class='delete'>delete</td>";
							echo "</tr>";
						}
					?>
					</tbody> 
				</table>
				
				<div id="modify"></div>
				<div id="create"></div>
				<div id="delete"></div>
			</div>
		</div>
	</body> 
</html>
	